<template>
	<view class="box">
		<view class="top">
			<u-navbar :is-back="true" title="我的团队" :border-bottom="false"></u-navbar>
		</view>
		<view class="userinfo container_br" v-for="item in list" :key="item.id" v-if="list.length>0">
			<view class="top flc">
				<view class="left">
					<u-avatar :src="item.avatar_format" size="120"></u-avatar>
				</view>
				<view class="right ml2">
					<view class="name">
						<span>{{item.realname}}</span> <span class="ml2">{{item.nickname}}</span>
					</view>
					<view class="sex">
						<span v-if="item.gender==0">男</span>
						<span v-if="item.gender==1">女</span>
					</view>
					<view class="phone">
						{{item.phone}}
					</view>
				</view>
			</view>
			<view class="bottom jsbc">
				<view class="left">
					<view class="title">
						销售总额
					</view>
					<view class="num">
						￥{{item.sales_amount}}
					</view>
				</view>
				<view class="right">
					<view class="title">
						分销收益
					</view>
					<view class="num">
						￥{{item.sales_commission}}
					</view>
				</view>
			</view>
		</view>
		<view class="noData" style="width: 410rpx; height: 240rpx; margin: 60rpx auto;" v-else>
			<image src="../../static/img/empty.png" mode="widthFix" style="width: 410rpx; height: 240rpx;"></image>
		</view>
	</view>

</template>

<script>
	import {
		getLowers
	} from "../../api/index.js"
	import {
		getUserInfo,
	} from '../../api/user.js'
	import {
		closeload,
		toastload
	} from "../../utils/common.js";
	export default {
		data() {
			return {
				list: [],
				flag: false
			};
		},
		onLoad() {

			getLowers().then(res => {
				console.log('我的下级', res);
				this.list = res.list
			})

		},
		methods: {
			change(e) {
				this.current = e
			}
		}
	}
</script>

<style lang="scss">
	.bottom {
		padding: 20rpx 60;
		border-top: 1rpx solid #dedede;
		margin-top: 20rpx;
		box-sizing: border-box;

		.title {
			font-size: 32rpx;
			font-weight: 600;
		}

		.right {
			display: flex;
			flex-direction: column;
			align-items: center;
		}

		.num {
			color: #fa4356;
		}

	}

	.top {
		.right {
			height: 120rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
		}
	}
</style>